@import "reset.less";

/*--作者QQ:951252660 纯原创 有需要建站 网页设计 平面设计 前端页面...代写的可以给我发邮件哦！本源码仅做学习交流使用，不提供技术支持--*/
#nav[data-scroll="1"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#09203f), to(#537895));
    background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-animation:moveTTB 300ms linear forwards;
            animation:moveTTB 300ms linear forwards;
    @-webkit-keyframes moveTTB {
        0%{
            -webkit-transform: translateY(-100px);
                    transform: translateY(-100px);
            opacity: 0;
        }
        100%{
            -webkit-transform: translateX(0px);
                    transform: translateX(0px);
            opacity: 1;
        }
    }
    @keyframes moveTTB {
        0%{
            -webkit-transform: translateY(-100px);
                    transform: translateY(-100px);
            opacity: 0;
        }
        100%{
            -webkit-transform: translateX(0px);
                    transform: translateX(0px);
            opacity: 1;
        }
    }
    .center {
        width: 1200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    span{
        display: none;
    }
/*--作者QQ:951252660 纯原创 有需要建站 网页设计 平面设计 前端页面...代写的可以给我发邮件哦！本源码仅做学习交流使用，不提供技术支持--*/
    a {

        -webkit-box-flex: 1;

            -ms-flex: 1;

                flex: 1;
        color: #fff;
        height: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        font-size: 14px;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        text-decoration: none;
        &:hover{
            dl{
                -webkit-transform: translateY(-40px);
                        transform: translateY(-40px);
                dt{
                    background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);
                }
            }
        }
    }
    dl {
        -webkit-transition: all 300ms linear;
        transition: all 300ms linear;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        dt {
            background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);
            height: 40px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            color: #fff;
        }

        dd {
            height: 40px;
            background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            color: #fff;
        }
    }
}
/*--作者QQ:951252660 纯原创 有需要建站 网页设计 平面设计 前端页面...代写的可以给我发邮件哦！本源码仅做学习交流使用，不提供技术支持--*/
#nav[data-scroll="0"]{
    position: fixed;
    left: 0;
    top:0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100vh;
    z-index: 999;
    background: #C9CCD3;
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.50)), to(rgba(0,0,0,0.50)));
 background-image: linear-gradient(-180deg, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%);
 background-blend-mode: lighten;
    width: 40px;
    -webkit-animation:moveRTL 300ms linear forwards;
            animation:moveRTL 300ms linear forwards;
    @-webkit-keyframes moveRTL {
        0%{
            -webkit-transform: translateX(-40px);
                    transform: translateX(-40px);
        }
        100%{
            -webkit-transform: translateX(0px);
                    transform: translateX(0px);
        }
    }
    @keyframes moveRTL {
        0%{
            -webkit-transform: translateX(-40px);
                    transform: translateX(-40px);
        }
        100%{
            -webkit-transform: translateX(0px);
                    transform: translateX(0px);
        }
    }

    a{
        position: relative;
        dl{
            position: absolute;
            left: 40px;
            top:0;
        }
        &:hover{
            dl{
                background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
                width: 80px;
                -webkit-transition: all 200ms linear;
                transition: all 200ms linear;
                -webkit-transform: translateX(0px);
                        transform: translateX(0px);
                opacity: 1;
                dt{
                    height: 40px;
                    color: #fff;
                    line-height: 40px;
                    padding-left: 10px;
                    font-size: 12px;
                }
                dd{
                   display: none;
                }
            }
        }
    }
    span{
        width: 40px;
        height: 40px;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        background-image: -webkit-gradient(linear, left bottom, left top, from(#e6e9f0), to(#eef1f5));
        background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
        img{
            width: 32px;
            height: 32px;
        }
        &:hover{
            background-image: -webkit-gradient(linear, left bottom, left top, from(#dad4ec), color-stop(1%, #dad4ec), to(#f3e7e9));
            background-image: linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%);
        }
    }
    dl{
      -webkit-transform: translateX(-200px);
              transform: translateX(-200px);
      opacity: 0;
    }
}